<template>
    <view class="container">
        <!-- 表单内容 -->
        <u-form class="form-content">
            <u-form-item class="form-item" label-width="0">
                <u-input
                        v-model="formData.stationWay"
                        placeholder="始发站"
                        class="custom-input"
                />
                <u-input
                        v-model="formData.stationWay"
                        placeholder="线路名称"
                        class="custom-input"
                />
                <u-input
                        v-model="formData.stationWay"
                        placeholder="讫站点"
                        class="custom-input"
                />
            </u-form-item>
            <u-form-item label="途中站点" class="form-item" label-width="120">
                <u-input
                        v-model="formData.stationWay"
                        placeholder="请输入途中站点"
                        class="custom-input"
                />
            </u-form-item>
            <u-form-item label="数据来源" class="form-item" label-width="120">
                <u-input
                        v-model="formData.dataSources "
                        placeholder="请选择数据来源"
                        @click="changeOpenRegionPicker"
                        class="custom-input"
                />
                <area-picker
                        ref="regionPicker"
                        :title="dataSourcesTitle"
                        titleColor="#808080"
                        titleFontSize="14px"
                        cancelType="icon"
                        cancelColor="#999999"
                        cancleFontSize="28rpx"
                        confirmColor="#2877FF"
                        confirmFontSize="14px"
                        confirmFontWeight="500"
                        itemFontSize="14px"
                        @onClose="closeRegionPicker"
                        @onConfirm="confirmRegionPicker"
                        :pickerList="listDataSources"
                />
            </u-form-item>
        </u-form>
        <!-- 查询按钮 -->
        <view class="btn-container">
            <u-button @click="submitForm">立即查询</u-button>
        </view>
    </view>
</template>

<script>
  import areaPicker from "@/components/area-picker/area-picker.vue";
  import {getDataSources} from "@/common/util_complete.js";

  export default {
    components: {
      areaPicker,
    },
    data() {
      return {
        dataSourcesTitle: "选择数据来源",
        formData: {
          dataSources: "", // 数据来源
          stationWay: "", // 业户名称
        },
        listDataSources: [], // 行政区划选择
      };
    },
    onLoad(options) {
      this.listDataSources = getDataSources(this.listDataSources);
    },

    methods: {
      // 打开行政区划选择器
      changeOpenRegionPicker() {
        this.$refs.regionPicker._open();
      },
      closeRegionPicker() {
        this.$refs.regionPicker._close();
      },
      confirmRegionPicker(checkedValue) {
        this.formData.dataSources = checkedValue;
      },
      submitForm() {
        uni.navigateTo({
          url: "/pages/hub_ygzw/route/routeQuery/siteQueryInfo",
        });
        return;
      },
    },
  };
</script>

<style scoped lang="scss">
    .container {
        padding: 10px;
        background-color: #f3f6fa;
        height: 100vh;
        box-sizing: border-box;
    }

    .form-content {
        background-color: #ffffff;
        padding: 0;
        /* 去掉 padding */
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .form-item {
        padding: 0 10px;
        border-bottom: 1px solid #f1f1f1;
        /* 设置下边框 */
        /* 设置下边框 */
        ::v-deep .u-border,
        .up-border {
            border: none !important;
        }
    }

    .custom-input {
        border: none;
        /* 去掉输入框的边框 */
        background-color: transparent;
        /* 使背景透明 */
    }

    .btn-container {
        margin-top: 30px;
        text-align: center;
        position: absolute;
        right: 0;
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;

        ::v-deep .u-button--info[data-v-461e713c] {
            width: 100%;
            background-color: #2877ff;
            color: #ffffff;
        }
    }

    .arrow-icon-groud {
        position: relative;
        flex: 1;

        .arrow-icon {
            position: absolute !important;
            right: 20px;
            top: 10px;
        }
    }
</style>
